<template>
  <el-dialog
    :title="lang.t('components.multiple.title')"
    v-model="show"
    :width="600"
  >
    <slot></slot>
    <el-progress 
      :status="progress.status" 
      :percentage="progress.length / progress.total * 100" 
      :show-text="false" 
    />
    <div style="text-align: center;padding-top: 20px; ">
      <el-link :type="progress.type" href="javascript:;">
        {{  lang.t('components.multiple.' + progress.type, progress) }}
      </el-link>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="onStart">{{ lang.t('components.multiple.start') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref, reactive } from 'vue'
import app from '@/app'

export default {
  emits: ['open', 'start'],
  setup(props, { emit }) {
    // 进度
    const progress = reactive({
      length: 0,
      total: 0,
      status: '', 
      type: 'primary'
    })

    // 对话框
    const show = ref(false)

    // 加载
    const loading = ref(false)

    // 打开
    const open = () => {
      // 显示Model
      show.value = true

      if(!loading.value) {
        emit('open')
      }
    }

    // 处理进度
    const handle = (total, count) => {
      progress.length = count
      progress.total = total
      progress.status = ''
      progress.type = 'primary'
    }

    // 状态改变
    const status = (ok) => {
      progress.status = ok ? 'success' : 'exception',
      progress.type = ok ? 'success' : 'danger'
      loading.value = false

      app.ui.notify({
        title: app.lang.t('components.multiple.title'),
        type: ok ? 'success' : 'error', 
        message: app.lang.t('components.multiple.' + progress.type, progress),
        duration: 0,
        offset: 100,
      })
    }

    // 开始导入
    const onStart = () => {
      // 准备加载
      loading.value = true

      // 加载事件
      emit('start')
    }

    return {
      lang: app.lang,
      progress,
      show,
      loading,
      onStart,
      open,
      status,
      handle,
    }
  }
}
</script>